<template>
    <div class="BaesMap">
        <!--标题-->
        <div class="map-title-div">
            <div class="map-statistics-type">
                <el-select v-model="statisticsType" @change="changeType" placeholder="请选择" size="small" style="width: 140px;">
                    <el-option
                            v-for="item in statisticsTypeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <!-- <p>回到首页</p> -->
            </div>
            <div class="map-title">
                <span class="title-0"><span :class="{'area-title': cityType != 'country'}">{{cityTitle}}</span>{{statisticsType}}地区分布</span>
                <br/>
                <span class="title-1" v-show="cityType == 'country'">已接入城市（<span class="city-count">{{cityCount}}</span>个）</span>
            </div>
            <div class="go-back-div">
                <a class="go-back-country" v-show="cityType == 'province'" @click="goBackCountry()"><div class="go-back-img"></div><span>返回全国</span></a>
                <a class="go-back-country" v-show="cityType == 'city'" @click="gotoAreaMapByCode(parentCode)"><div class="go-back-img"></div><span>返回{{parentName}}</span></a>
                <a class="go-back-country" v-show="showType != 'home' && cityType == 'country'" @click="backhome()"><div class="go-back-img"></div><span>返回首页</span></a>
            </div>
        </div>
        <!--地图-->
        <div class="map-div">
            <!--echarts地图-->
            <div class="map-echarts" :class="{'sea-background': cityType == 'country', 'sea-background-440000': cityCode == '440000'}" v-show="cityType == 'country' || cityType == 'province' || cityType == 'city'">
                <div id="echartsMapView" style="height: 100%; width: 100%;"></div>
            </div>
            <!--arcgis地图（CIM）-->
            <!--<div class="map-arcgis" v-show="cityType == 'city'">

            </div>-->
            <div class="popular-cities" v-show="cityType == 'country' || cityType == 'province'">
                <div class="popular-title">城市列表</div>
                <ul>
                    <li class="popular-list" v-show="cityType == 'country' && index < 15"  v-for="(popularCity, index) in popularCities" :key="popularCity.code" @click="gotoAreaMapByCode(popularCity.code)">     <!--显示热门城市-->
                        {{popularCity.name}}
                    </li>
                </ul>
                <ul>
                    <li class="popular-list" v-show="cityType == 'province'  && index < 15" v-for="(provinceCity, index) in provinceCities" :key="provinceCity.code" @click="gotoAreaMapByCode(provinceCity.code)">     <!--显示省份下级城市-->
                        {{provinceCity.name}}
                    </li>
                </ul>
                <div class="popular-end" @click="showDetail()">更多</div>
            </div>
        </div>
        <!--弹出层-->
        <el-dialog
                :visible.sync="showDetailDialog"
                v-loading="detailLoading"
                :close-on-click-modal="false"
                title="区域选择"
                width="950px">
            <div class="area-select-div">
                <div class="current-area">当前选择:  <span class="font-color-orange font-bold">{{selectAreaCityName}}</span></div>
                <div class="popular-area" v-show="cityType == 'country'">
                    <div class="select-area-title">热门城市:</div>
                    <div class="polular-area-list">
                        <el-button size="small" type="white" :class="{'is-active': selectAreaCity == popularCity.code}" style="margin: 6px; width: 100px;" v-for="(popularCity) in popularCities" :key="popularCity.code" @click="selectAreaButton(popularCity.code)">     <!--显示热门城市-->
                            {{popularCity.name}}
                        </el-button>
                    </div>
                </div>
                <div class="province-area" v-show="cityType == 'country'">
                    <div class="select-area-title">所有省份:</div>
                    <div class="province-area-list">
                        <el-button size="small" type="white" :class="{'is-active': selectAreaCity == provinceInfo.code}" style="margin: 6px; width: 100px;" v-for="(provinceInfo) in provinces" :key="provinceInfo.code" @click="selectAreaButton(provinceInfo.code)">     <!--显示所有省份-->
                            {{provinceInfo.name}}
                        </el-button>
                    </div>
                </div>
                <div class="province-area" v-show="cityType == 'province'">
                    <div class="select-area-title">当前省份城市:</div>
                    <div class="province-area-list">
                        <el-button size="small" type="white" :class="{'is-active': selectAreaCity == provinceCity.code}" style="margin: 6px; width: 100px;" v-for="(provinceCity) in provinceCities" :key="provinceCity.code" @click="selectAreaButton(provinceCity.code)">     <!--显示当前省份城市-->
                            {{provinceCity.name}}
                        </el-button>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeDetail" type="white" size="small" style="width: 100px;">关闭</el-button>
                <el-button @click="closeDetail(); gotoAreaMapByCode(selectAreaCity)" type="orange" size="small" style="width: 100px;">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import echartsMapConfig from '../../config/echartsMapConfig'
    import {getEchartsChinaJson, getEchartsProvinceJson, getEchartsCityJson} from '../../api/localService'
    //引入中国地图依赖
    import 'echarts/map/js/china'

    export default {
        name: "BaesMap",
        /**
         *  areaCode: 行政区划代码
         *  areaType: country: 国家, province: 省份, city: 城市
         *  showType: 显示的类型(home: 首页, emergencies: 突发事件, hiddenDanger: 风险隐患, constructionSafety: 房屋与施工安全, monitoringWarning: 监测预警)
         */
        props: ['areaCode', 'areaType', 'showType'],
        data() {
            return {
                statisticsType: '',
                statisticsTypeList: [],
                statisticsTypeConfig: {
                    home: [{      //首页
                        value: '突发事件',
                        label: '突发事件'
                    },{
                        value: '指标评价',
                        label: '指标评价'
                    },{
                        value: '自然灾害',
                        label: '自然灾害'
                    }],
                    emergencies: [{      //突发事件
                        value: '突发事件',
                        label: '突发事件'
                    },{
                        value: '指标评价',
                        label: '指标评价'
                    },{
                        value: '自然灾害',
                        label: '自然灾害'
                    }],
                    hiddenDanger: [{      //风险隐患
                        value: '重大隐患企业',
                        label: '重大隐患企业'
                    },{
                        value: '危化品企业',
                        label: '危化品企业'
                    }],
                    constructionSafety: [{     //房屋与施工安全
                        value: '智慧工地',
                        label: '智慧工地'
                    },{
                        value: '在册危房',
                        label: '在册危房'
                    },{
                        value: '到期房屋',
                        label: '到期房屋'
                    }],
                    monitoringWarning: [{     //监测预警
                        value: '自然灾害',
                        label: '自然灾害'
                    },{
                        value: '生命线重大事故',
                        label: '生命线重大事故'
                    },{
                        value: '网络安全漏洞',
                        label: '网络安全漏洞'
                    }],
                },
                cityTitle: '全国',
                cityCode: this.areaCode ? this.areaCode: '000000',
                cityType: this.areaType ? this.areaType: 'country',   //country: 国家, province: 省份, city: 城市
                cityTypeConfig: {country: 'country', province: 'province', city: 'city', county: 'county'},
                cityCount: 663,    //已接入城市数
                popularCities: [],  //热门城市
                provinces: [],   //所有省份（包括行政区）
                provinceCities: [],   //省份下的城市列表
                parentName: '',     //上级名称
                parentCode: '',     //上级编码
                myChart: null,     //echarts
                echartsAreaFlag: {},  //判断区域是否下的行政区划是否已经保存
                mapTotalData: [],       //动态生成的城市统计数据
                mapTotalFlag: {},       //动态生成的城市统计数据
                visualMapPiecesConfig: {
                    country: [      //地图统计图例范围
                        {gte: 901}, // 不指定 max，表示 max 为无限大（Infinity）。
                        {gte: 601, lte: 900},
                        {gte: 301, lte: 600},
                        {gte: 1, lte: 300},
                        {lte: 0, label: '0'},     // 不指定 min，表示 min 为无限大（-Infinity）。
                    ],
                    province: [      //地图统计图例范围
                        {gte: 91}, // 不指定 max，表示 max 为无限大（Infinity）。
                        {gte: 61, lte: 90},
                        {gte: 31, lte: 60},
                        {gte: 1, lte: 30},
                        {lte: 0, label: '0'},     // 不指定 min，表示 min 为无限大（-Infinity）。
                    ],
                    city: [      //地图统计图例范围
                        {gte: 9}, // 不指定 max，表示 max 为无限大（Infinity）。
                        {gte: 6, lt: 9},
                        {gte: 3, lt: 6},
                        {gte: 1, lt: 3},
                        {lte: 0, label: '0'},     // 不指定 min，表示 min 为无限大（-Infinity）。
                    ],
                },
                //弹出框
                showDetailDialog: false,
                detailLoading: false,
                selectAreaCity: '000000',
                selectAreaCityName: '全国',
            }
        },
        methods: {
            initMap(){
                this.setAreaInfoToLocal();
                if(this.cityType == this.cityTypeConfig.country){
                    this.cityTitle = '全国';
                }else{
                    this.cityTitle = echartsMapConfig.areaCodeMap[this.cityCode];
                }
                if(this.cityType == this.cityTypeConfig.city){
                    //todo: 加载arcgis地图
                    this.getEchartsData();
                }else{
                    this.getEchartsData();
                }
            },
            initType(){    //初始化类型
                if(this.showType && this.statisticsTypeConfig[this.showType]){
                    this.statisticsTypeList = this.statisticsTypeConfig[this.showType];
                }else{
                    this.statisticsTypeList = this.statisticsTypeConfig.home;
                }
                this.statisticsType = this.statisticsTypeList[0].value;
                this.changeType();
            },
            changeType(val) {
                if(val){
                    this.mapTotalData = [];       //动态生成的城市统计数据
                    this.mapTotalFlag = {};       //动态生成的城市统计数据
                    //用于保存第一次生成的统计数据
                    window.mapTotalData = null;
                    window.mapTotalFlag = null;
                    this.initMap();
                }
            },
            getEchartsData(){
                var _this = this;
                let mapType = 'china';
                if(this.cityType == 'province' && this.cityCode){   //省份
                    mapType = this.cityCode;
                    getEchartsProvinceJson(mapType).then(rs=>{
                        if(rs){
                            let data = rs;
                            pushAreaCodeToMap(data.features, mapType);
                            //获取省份下的各个城市
                            getProvinceCities(data.features);
                            _this.dynamicGeneratedTotalData(this.cityCode, this.cityType);
                            initEcharts(mapType, rs, _this.mapTotalData);
                        }
                    })
                }else if(this.cityType == this.cityTypeConfig.city && this.cityCode){    //城市
                    mapType = this.cityCode;
                    getEchartsCityJson(this.cityCode).then(rs=>{
                        if(rs){
                            let data = rs;
                            pushAreaCodeToMap(data.features, mapType);
                            _this.dynamicGeneratedTotalData(this.cityCode, this.cityType);
                            initEcharts(mapType, rs, _this.mapTotalData);
                        }
                    })
                }else{             //全国
                    getEchartsChinaJson().then(rs=>{
                        if(rs){
                            let data = rs;
                            pushAreaCodeToMap(data.features, mapType);
                            //获取所有省份信息
                            getProvinces(data.features);
                            _this.dynamicGeneratedTotalData(this.cityCode, this.cityType);
                            initEcharts(mapType, rs, _this.mapTotalData);
                        }
                    })
                }

                //初始化echarts
                function initEcharts(mapType, geoJson, data){
                    if(mapType != 'china'){
                        _this.$echarts.registerMap(mapType, geoJson);
                    }
                    //处理data的映射(code->name)
                    for(let key in data){
                        data[key].name = echartsMapConfig.areaCodeMap[data[key].code];
                    }
                    _this.initEChartsMap(mapType, data)
                }

                //处理获取到的行政区划代码
                function pushAreaCodeToMap(features, mapType){
                    if(!_this.echartsAreaFlag[mapType]){      //判断没有保存过的才进行保存
                        _this.echartsAreaFlag[mapType] = true;

                        for(let key in features){
                            let properties = features[key].properties;
                            let id = features[key].id ? features[key].id : properties.id;
                            id = id ? id : properties.adcode;           //自己下载的版本
                            if(id && properties.name){
                                echartsMapConfig.areaCodeMap[id] = properties.name;
                            }
                        }
                    }
                }
                //获取所有省份信息
                function getProvinces(features){
                    _this.provinces = [];
                    let provinceObj = {};
                    let proviceCodeArr = [];
                    for(let key in features){
                        let properties = features[key].properties;
                        let id = features[key].id ? features[key].id : properties.id;
                        id = id ? id : properties.adcode;           //自己下载的版本
                        if(id && properties.name){
                            let cityName = properties.name.length > 5 ? (properties.name.substring(0,4) + '...') : properties.name;
                            provinceObj[id] = {code: id, name: cityName};
                            proviceCodeArr.push(id);
                        }
                    }
                    proviceCodeArr = proviceCodeArr.sort(function(a,b){      //升序
                        return a - b;
                    });
                    for(let index in proviceCodeArr){
                        _this.provinces.push(provinceObj[proviceCodeArr[index]]);
                    }
                }
                //获取省份下的各个城市
                function getProvinceCities(features){
                    _this.provinceCities = [];
                    let cityObj = {};
                    let cityCodeArr = [];
                    for(let key in features){
                        let properties = features[key].properties;
                        let id = features[key].id ? features[key].id : properties.id;
                        id = id ? id : properties.adcode;           //自己下载的版本
                        if(id && properties.name){
                            let cityName = properties.name.length > 5 ? (properties.name.substring(0,4) + '...') : properties.name;
                            cityObj[id] = {code: id, name: cityName};
                            cityCodeArr.push(id);
                        }
                    }
                    cityCodeArr = cityCodeArr.sort(function(a,b){      //升序
                        return a - b;
                    });
                    for(let index in cityCodeArr){
                        _this.provinceCities.push(cityObj[cityCodeArr[index]]);
                    }
                }
            },

            //动态生成数据
            dynamicGeneratedTotalData(areaCode, areaType){
                var _this = this;
                //判断是否已经生成过一次数据
                if(window.mapTotalData && window.mapTotalFlag && _this.mapTotalData.length == 0){
                    _this.mapTotalData = window.mapTotalData;
                    _this.mapTotalFlag = window.mapTotalFlag;
                }

                if(areaCode && areaCode == '000000'){
                    generatedProvince();
                }else if(areaCode && areaType == this.cityTypeConfig.province){
                    generatedCity(areaCode);
                }else if(areaCode && areaType == this.cityTypeConfig.city){
                    if(areaCode == '110000' || areaCode == '120000' || areaCode == '310000' || areaCode == '500000' || areaCode == '810000' || areaCode == '820000'){  //直辖市
                        generatedMunicipalityCounty(areaCode);
                    }else{
                        generatedCounty(areaCode);
                    }
                }
                //判断是否第一次生成数据
                if(!window.mapTotalData && !window.mapTotalFlag){
                    window.mapTotalData = _this.mapTotalData;
                    window.mapTotalFlag = _this.mapTotalFlag;
                }

                //生成省份数据
                function generatedProvince(){
                    if(_this.mapTotalFlag['000000']){
                        return;
                    }
                    _this.mapTotalFlag['000000'] = true;
                    for(let key in echartsMapConfig.areaCodeMap){
                        if(key.endsWith('0000')){
                            let randomTotal = parseInt(Math.random() * 1500);        //省份使用随机数据
                            _this.mapTotalData.push({value: randomTotal, code: key});
                        }
                    }
                }
                //生成城市数据
                function generatedCity(areaCode){
                    if(_this.mapTotalFlag[areaCode]){
                        return;
                    }
                    if(!_this.mapTotalFlag['000000']){
                        generatedProvince();
                    }
                    _this.mapTotalFlag[areaCode] = true;
                    let provinceTotal = 0;
                    for(let key in _this.mapTotalData){
                        if(_this.mapTotalData[key].code == areaCode){
                            provinceTotal = _this.mapTotalData[key].value;
                            break;
                        }
                    }
                    if(provinceTotal != 0){
                        let preStr = areaCode.substring(0,2);
                        let endTotalDataIndex = 0;
                        for(let key in echartsMapConfig.areaCodeMap){
                            if(key .startsWith(preStr) && key.endsWith('00') && key != areaCode){
                                let random = Math.random();        //城市使用随机数据
                                let cityRandom = Math.ceil(provinceTotal * random * 0.3);
                                if(cityRandom > provinceTotal){
                                    cityRandom = provinceTotal;
                                    provinceTotal = 0;
                                }else{
                                    provinceTotal = provinceTotal - cityRandom;
                                }
                                _this.mapTotalData.push({value: cityRandom, code: key});
                                endTotalDataIndex = _this.mapTotalData.length - 1;
                            }
                        }
                        if(provinceTotal > 0){
                            _this.mapTotalData[endTotalDataIndex].value += provinceTotal;
                        }
                    }
                }
                //生成直辖市数据
                function generatedMunicipalityCounty(areaCode){
                    if(_this.mapTotalFlag[areaCode]){
                        return;
                    }
                    if(!_this.mapTotalFlag['000000']){
                        generatedProvince();
                    }
                    let provinceCode = areaCode.substring(0, 2) + "0000";
                    if(!_this.mapTotalFlag[provinceCode]){
                        generatedCity(provinceCode);
                    }
                    _this.mapTotalFlag[areaCode] = true;
                    let cityTotal = 0;
                    for(let key in _this.mapTotalData){
                        if(_this.mapTotalData[key].code == areaCode){
                            cityTotal = _this.mapTotalData[key].value;
                            break;
                        }
                    }
                    if(cityTotal != 0){
                        let preStr = areaCode.substring(0,2);
                        let endTotalDataIndex = 0;
                        for(let key in echartsMapConfig.areaCodeMap){
                            if(key.startsWith(preStr) && key != areaCode){
                                let random = Math.random();        //城市使用随机数据
                                let countyRandom = Math.ceil(cityTotal * random * 0.3);
                                if(countyRandom > cityTotal){
                                    countyRandom = cityTotal;
                                    cityTotal = 0;
                                }else{
                                    cityTotal = cityTotal - countyRandom;
                                }
                                _this.mapTotalData.push({value: countyRandom, code: key});
                                endTotalDataIndex = _this.mapTotalData.length - 1;
                            }
                        }
                        if(cityTotal > 0){
                            _this.mapTotalData[endTotalDataIndex].value += cityTotal;
                        }
                    }
                }
                //生成县数据
                function generatedCounty(areaCode){
                    if(_this.mapTotalFlag[areaCode]){
                        return;
                    }
                    if(!_this.mapTotalFlag['000000']){
                        generatedProvince();
                    }
                    let provinceCode = areaCode.substring(0, 2) + "0000";
                    if(!_this.mapTotalFlag[provinceCode]){
                        generatedCity(provinceCode);
                    }
                    _this.mapTotalFlag[areaCode] = true;
                    let cityTotal = 0;
                    for(let key in _this.mapTotalData){
                        if(_this.mapTotalData[key].code == areaCode){
                            cityTotal = _this.mapTotalData[key].value;
                            break;
                        }
                    }
                    if(cityTotal != 0){
                        let preStr = areaCode.substring(0,4);
                        let endTotalDataIndex = 0;
                        for(let key in echartsMapConfig.areaCodeMap){
                            if(key.startsWith(preStr) && key != areaCode){
                                let random = Math.random();        //城市使用随机数据
                                let countyRandom = Math.ceil(cityTotal * random * 0.3);
                                if(countyRandom > cityTotal){
                                    countyRandom = cityTotal;
                                    cityTotal = 0;
                                }else{
                                    cityTotal = cityTotal - countyRandom;
                                }
                                _this.mapTotalData.push({value: countyRandom, code: key});
                                endTotalDataIndex = _this.mapTotalData.length - 1;
                            }
                        }
                        if(cityTotal > 0){
                            _this.mapTotalData[endTotalDataIndex].value += cityTotal;
                        }
                    }
                }
            },
            initEChartsMap(mapType, data){
                var _this = this;
                if(this.myChart){     //如果存在,先销毁
                    this.myChart.dispose()
                }
                this.myChart = this.$echarts.init(document.getElementById("echartsMapView"));
                let visualMapPieces = this.visualMapPiecesConfig[this.cityType] ? this.visualMapPiecesConfig[this.cityType] : this.visualMapPiecesConfig.country;
                let serie = {
                    name: this.statisticsType,
                    type: 'map',
                    mapType: mapType, // 自定义扩展图表类型
                    itemStyle: {
                        areaColor: '#f2f7f5',
                    },
                    label: {
                        show: true
                    },
                    data: data,
                };
                if(this.cityCode == '460000'){       //海南
                    serie.center = [109.844902, 19.0392];
                    serie.layoutCenter = ['50%', '50%'];
                    serie.layoutSize = "600%";
                }
                this.myChart.setOption({
                    tooltip: {
                        trigger: 'item',
                        // formatter: '{b}<br/>{c} (个)'
                        formatter: function (params) {
                            let value = 0;
                            if(params.value){
                                value = params.value;
                            }
                            return `${params.seriesName}<br/>${params.name} : ${value}个`;
                        }
                    },
                    visualMap: {
                        type: 'piecewise',
                        splitNumber: 5,
                        pieces: visualMapPieces,
                        realtime: false,
                        calculable: true,
                        inRange: {
                            color: ['#f2f7f5','#e0ede7','#c6dfd3', '#a2ccb8', '#80b99d']
                        }
                    },
                    series: [serie]
                });

                this.myChart.on('click', function (param) {
                    if(param && param.data && param.data.code){
                        //进入下一级页面
                        _this.gotoNextMap(param.data.code);
                    }
                });
            },
            setAreaTypeByAreaCode(areaCode){
                if(areaCode){
                    //直辖市逻辑
                    if(areaCode == '110000' || areaCode == '120000' || areaCode == '310000' || areaCode == '500000' || areaCode == '810000' || areaCode == '820000'){
                        this.cityType = this.cityTypeConfig.city;
                    }else{
                        if(areaCode == "000000"){    //全国
                            this.cityType = this.cityTypeConfig.country;
                        }else if(areaCode.endsWith("0000")){    //省份或者直辖市
                            this.cityType = this.cityTypeConfig.province;
                        }else if(areaCode.endsWith("00")){    //城市
                            this.cityType = this.cityTypeConfig.city;
                        }else{       //区县
                            if(areaCode.startsWith("46")){      //海南省下的城市为县级市
                                this.cityType = this.cityTypeConfig.city;
                            }else{
                                this.cityType = this.cityTypeConfig.country;
                            }
                        }
                    }
                }
            },
            //获取父节点的编号
            getParentAreaCode(areaCode){
                let parentCode = '000000';
                if(areaCode){
                    if(!(areaCode == '110000' || areaCode == '120000' || areaCode == '310000' || areaCode == '500000' || areaCode == '810000' || areaCode == '820000')){    //非直辖市
                        if(areaCode.endsWith("000000")){     //国家
                        }else if(areaCode.endsWith("0000")){   //省份
                        }else if(areaCode.endsWith("00")){    //城市， 父级为省份
                            parentCode = areaCode.substring(0, 2) + "0000";
                        }else{       //区县
                            if(areaCode.startsWith("46")){      //海南省下的城市为县级市
                                parentCode = areaCode.substring(0, 2) + "0000";
                            }else{
                                parentCode = areaCode.substring(0, 4) + "00";
                            }
                        }
                    }
                }
                return parentCode;
            },
            gotoNextMap(areaCode){
                if(areaCode && this.cityType != this.cityTypeConfig.city){
                    this.cityCode = areaCode;
                    this.setAreaTypeByAreaCode(areaCode);

                    this.changeMapArea();
                }
            },
            //跳转到指定的区域
            gotoAreaMapByCode(areaCode){
                if(areaCode && areaCode != this.cityCode){
                    this.cityCode = areaCode;
                    this.setAreaTypeByAreaCode(areaCode);
                    this.changeMapArea();
                }
            },
            //返回全国
            goBackCountry(){
                this.cityCode = '000000';
                this.setAreaTypeByAreaCode(this.cityCode);
                this.changeMapArea();
            },
            //触发地图变化事件
            changeMapArea(){
                // this.initMap();      //由页面进行跳转, 地图组件不进行跳转
                let areaInfo = {areaCode: this.cityCode, areaType: this.cityType};
                this.setAreaInfoToLocal();
                this.$emit('changeMapArea',areaInfo);
            },
            //设置区域信息到本地缓存
            setAreaInfoToLocal(){
                this.$local.setAreaCode(this.cityCode);
                this.$local.setAreaType(this.cityType);
            },
            // 回到首页
            backhome() {
                this.$router.push('/portal-web/home');
            },
            //显示弹出框
            showDetail(){
                this.selectAreaCity = this.cityCode;
                this.selectAreaCityName = this.cityTitle;
                this.showDetailDialog = true;
            },
            //点击选择按钮
            selectAreaButton(areaCode){
                this.selectAreaCity = areaCode;
                if(this.selectAreaCity == this.cityTypeConfig.country){
                    this.selectAreaCityName = '全国';
                }else{
                    this.selectAreaCityName = echartsMapConfig.areaCodeMap[areaCode];
                }
            },
            //关闭弹出框
            closeDetail(){
                this.showDetailDialog = false;
            },
        },
        mounted() {
            this.initMap();
            this.initType();
            this.popularCities = echartsMapConfig.popularCities;    //热门城市
            //刷新
            window.onresize = () => {
                if(this.myChart){
                    this.myChart.resize()
                }
            }
        },
        watch: {
            'cityCode': {
                handler(val) {
                    this.parentCode = this.getParentAreaCode(val);
                    this.parentName = echartsMapConfig.areaCodeMap[this.parentCode];
                },
                deep: true,
                immediate: true
            },
        },
        components: {},
        beforeDestroy(){
            if(this.myChart){     //如果存在,销毁
                this.myChart.dispose()
            }
        },
        destroyed(){

        },
    }
</script>

<style scoped lang="less">
    /*下拉框样式*/
    .el-select-dropdown__item{
        text-align: center;
    }
    .el-select-dropdown__item.selected {
        font-weight: normal;
        background: @bg_color2;
        color: @font_color;
    }
    /*button样式*/
    /*橙色底*/
    .el-button--orange.is-active,
    .el-button--orange:active {
        opacity: 0.8;
    }
    .el-button--orange:focus,
    .el-button--orange:hover {
        opacity: 0.8;
    }
    .el-button--orange {
        color: @color3;
        background-color: @color5;
        border-color: @color5;
    }
    /*白底*/
    .el-button--white:focus,
    .el-button--white:hover {
        background-color: @bg_color3;
        border-color: @bg_color3;
    }
    .el-button--white.is-active,
    .el-button--orange:active {
        background-color: @bg_color2;
        border-color: @bg_color2;
    }
    .el-button--white {
        color: @font_color;
        background-color: @color3;
    }

    .BaesMap {
        height: 100%;
        width: 100%;
        /*pointer-events: none;*/
        padding: 0;
        color: @font_color;
        .map-title-div{
            height: .08rem;
            .map-statistics-type{
                float: left;
                margin-top: .015rem;
                margin-left: .03rem;
                width: 20%;
                .custom-button {
                    background-color: #b37922;
                    border-color: #b37922;
                    height: 0.03rem;
                    width: 0.09rem;
                    margin: 0.01rem 0;
                }
            }
            .map-title{
                float: left;
                margin-top: .02rem;
                width: 50%;
                left: 25%;
                text-align: center;
                .title-0{
                    font-size: 24px;
                    font-weight: bold;
                    .area-title{
                        color: @font_color1;
                    }
                }
                .title-1{
                    font-size: 18px;
                    line-height: 30px;
                    .city-count{
                        color: @font_color1;
                        font-weight: bold;
                    }
                }
            }
            .go-back-div{
                float: right;
                margin-top: .02rem;
                margin-right: .03rem;
                width: 15%;
                a{
                    cursor:pointer;
                    color: @font_color;
                    font-size: .016rem;
                    font-weight: bold;
                    .go-back-img{
                        width: .02rem;
                        height: .02rem;
                        transform: translate(-50%,-10%);
                        display: inline-block;
                        vertical-align: middle;
                        background: url('../../assets/images/icon/返回.png') no-repeat center;
                    }
                    span{
                        line-height: .02rem;
                    }
                }
            }
        }
        .map-div{
            height: calc(100% - 0.12rem);
            width: calc(100% - 0.04rem);
            margin: .02rem;
            .map-echarts{
                height: 100%;
                width: calc(100% - .07rem);
            }
            .sea-background{
                background: url('../../assets/images/map/map_beijing.png') no-repeat center;
                background-size: cover;
            }
            .sea-background-440000{
                background: url('../../assets/images/map/map_beijing_440000.png') no-repeat center;
                background-size: cover;
            }
            .map-arcgis{
                height: 100%;
                width: 100%;
            }
            .popular-cities{
                /*pointer-events: none;*/
                position: absolute;
                top: .1rem;
                right: .02rem;
                height: calc(80% - .1rem);
                font-size: .015rem;
                text-align: right;
                div,li{
                    margin: .01rem .005rem;
                }
                .popular-title{
                    font-size: .016rem;
                    font-weight: bold;
                }
                .popular-list{
                    cursor:pointer;
                }
                .popular-end{
                    color: @font_color1;
                    cursor:pointer;
                }
            }
        }
        .area-select-div{
            width: 100%;
            .select-area-title{
                margin: .006rem 0;
            }
            .current-area{
                margin: .006rem .006rem .012rem;
            }
            .popular-area{
                margin: .012rem .006rem;
            }
            .province-area{
                margin: .012rem .006rem;
            }
        }
        .dialog-footer{
            padding-right: .015rem;
        }
    }
</style>